<template>
  <div class="resource-moment-wrapper">
    <div class="header-wrapper">
      <div class="header-tab-item">资源动态</div>
    </div>
    <div class="content-wrapper">
      <el-form inline="inline">
        <!-- 搜索 -->
        <el-form-item>
          <el-input
            prefix-icon="ele-Search"
            :style="{
              width: '270px',
              height: '40px',
              backgroundColor: '#f5f7f9',
            }"
            size="normal"
            clearable
          ></el-input>
          <el-button type="primary" size="default" @click="">搜索</el-button>
        </el-form-item>
        <!-- 资源类型选择框 -->
        <el-form-item label="资源类型: ">
          <el-select
            v-model="currentResourceTypeSelection.value"
            class="m-2"
            placeholder="Select"
            size="large"
          >
            <el-option
              v-for="item in resourceTypeSelection"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <!-- 状态选择框 -->
        <el-form-item label="状态: ">
          <el-select
            v-model="currentStatusTypeSelection.value"
            class="m-2"
            placeholder="Select"
            size="large"
          >
            <el-option
              v-for="item in statusTypeSelection"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

      </el-form>
      <!-- table -->
      <el-table :data="tableData" :style="{width: '960px'}"  >
    <el-table-column prop="content" label="内容" width="400" />
    <el-table-column prop="publishDate" label="发布时间"  />
    <el-table-column prop="data" label="数据"  />
    <el-table-column prop="status" label="状态"  />
    <el-table-column  label="操作" width="240" >
      <el-button type="primary" size="default" icon="ele-edit" @click=""></el-button>
      <el-button type="danger" size="default" icon="ele-delete" @click=""></el-button>
      
    </el-table-column>
  </el-table>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "resourceMoment",
});
</script>

<script setup lang="ts">
import { reactive, ref } from "vue";
// 资源类型选择框
const resourceTypeSelection = ref([
  { label: "全部资源", value: "1" },
  { label: "作品", value: "2" },
  { label: "教程", value: "3" },
  { label: "动态", value: "4" },
  { label: "专题", value: "5" },
]);
// 当前选择
const currentResourceTypeSelection = ref({ value: "1" });

const statusTypeSelection = ref([
  {label:'全部',value:'1'},
  {label:'已发布',value:'2'},
  {label:'未发布',value:'3'},
  {label:'审核中',value:'4'},
  {label:'审核未通过',value:'5'},
  {label:'仅主页可见',value:'6'},
])
const currentStatusTypeSelection = ref({ value: '2' })
// table
const tableData = ref([
  {content:'有啥内容啊',publishDate:'',data:'',status:'未完成'},
  {content:'有啥内容啊2',publishDate:'',data:'',status:'已完成'},
])
</script>

<style scoped lang="less">
.resource-moment-wrapper {
  margin-bottom: 20px;
  .header-wrapper {
    border-radius: 4px;
    background-color: #fff;
    position: relative;
    margin-bottom: 10px;
    .header-tab-item {
      padding: 28px 30px;
      color: #111;
      font-size: 14px;
      position: relative;
    }
  }
  .content-wrapper {
    background-color: #fff;
  }
}
:deep(.el-input__wrapper) {
  background-color: #f5f7f9;
}

:deep(el-table__header){
  background-color: #f5f7f9;
  text-align: center;
}
</style>
